<template>
  <div class="login-container">
    <!-- 导航 -->
    <van-nav-bar>
        <p slot="title" class="title">登录</p>
    </van-nav-bar>
    <van-form @submit="onSubmit" ref="lofins">
        <van-cell-group>
            <van-field  v-model="user.mobile" name="mobile" placeholder="请输入手机号" maxlength="11" :rules="userFormRules.mobiles">
            <i slot="left-icon" class="iconfont icon-shouji icons"></i>
            </van-field>
            <van-field v-model="user.code" name="code" type="password"  placeholder="请输入验证码" :rules="userFormRules.codes">      
            <i slot="left-icon" class="iconfont icon-yanzhengma icons"></i>
            <template #button>
                <van-count-down :time="time" format="mm 分 ss 秒" v-if="flog" @finish="finish"/>
                <van-button size="small" type="primary" class="btns" v-else  @click="fasong" native-type="button">发送验证码</van-button>
            </template>     
            </van-field>
            <van-button round block type="info" native-type="submit" class="btins">提交</van-button >
        </van-cell-group>
    </van-form>
  </div>
</template>

<script>
import { login } from '@/api/user.js'
export default {
  data() {
    return {
      time: 6 * 1000,
      flog:false,
      user:{
        mobile: '',
        code: ''
      },
      userFormRules:{
        mobiles:[{
          required:true,
          message:'请输入正确的手机号'
        },{
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: '手机号格式错误'
        }],
        codes:[{
          required:true,
          message:'请输入正确的验证码'
        },{
          pattern: /^\d{6}$/,
          message: '验证码格式错误'
        }]
      }
    }
  },
  methods:{
    async fasong() {
      // 验证手机号
      try {         
        await this.$refs.lofins.validate('mobile')
      } catch (err) {
        return console.log(err)
      }
      this.flog = true
    },
    finish() {
      this.flog = false
    },
    async onSubmit() {
      this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      try {
        const res = await login(this.user)
        this.$toast('登录成功')  
        // 吧token值给传到全局里面
        this.$store.commit('local',res.data.data)
        this.$router.push('/')
      } catch (err) {
        if (err.response.status === 400) {
          console.log(err)
          this.$toast('登录失败')
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.icons{
        font-size: 37px;
        color: #666666;
    }
.van-nav-bar{
    background: #3296fa;   
    .title{
        font-size: 32px;
        color: #ffffff;
    }
}
.btns{
        width: 152px;
        height: 46px;
        background-color: #ededed;
        border-radius: 23px;
        border: none;
        .van-button__text{
            color: #666666;
            font-size: 22px;
        }
}
.van-button--info{
    margin-top: 53px;
}
.btins{
    width: 694px;
    height: 88px;
    background: #6db4fb;
    border-radius: 10px;
    border: none;
    margin: 53px auto;
}
</style>
